<template>
  <view class="trip-new-view">
    <!-- 提示窗示例 -->
    <uni-popup ref="alertDialog" type="dialog">
      <uni-popup-dialog :type="data.msgType" cancelText="取消" confirmText="确认" title="删除资讯" content="是否删除当前的资讯!" @confirm="dialogConfirm"
        @close="dialogClose"></uni-popup-dialog>
    </uni-popup>
    <!-- 旅游资讯信息 -->
    <scroll-view class="trip-new-box" scroll-y="true">
      <!-- 图片列表 -->
      <view>
        <swiper class="trip-img-list" :indicator-dots="data.indicatorDots">
       <swiper-item class="trip-new-img" v-for="(item,index) in data.tripNew.imgList" :key="index">
         <image class="trip-new-img" v-if="index==0" mode="widthFix" :src="item.url" @click="imgPreview(index)"></image>
        	<image class="trip-new-img" v-else :mode="item.width >= 0.89*item.height ? 'widthFix':'heightFix'" :src="item.url" @click="imgPreview(index)"></image>
        </swiper-item>
      </swiper>     
      </view>
      <!-- 标题 -->
      <view class="trip-new-title">{{data.tripNew.title}}</view>
      <!-- 出发地和目的地、天数 -->
      <view class="trip-new-log">
        <view class="trip-index"></view>
        出发地-目的地
      </view>
      <view class="trip-new-road">
        {{data.tripNew.departure}}-{{data.tripNew.destination}}
      </view>
      <view class="trip-new-log">
        <view class="trip-index"></view>
        出发时间-天数
      </view>
      <view class="trip-new-road">
        {{data.tripNew.startTime}}-{{data.tripNew.dayNum}}天
      </view>
      <!-- 行程 -->
      <view class="trip-new-log">
        <view class="trip-index"></view>
        行程
      </view>
      <view class="trip-new-journey">
        <text user-select="true">{{data.tripNew.journey}}</text>
      </view>
      <!-- 说明 -->
      <view class="trip-new-log">
        <view class="trip-index"></view>
        说明
      </view>
      <view class="trip-new-more">
        <text user-select="true">{{data.tripNew.explain}}</text>
      </view>   
         
     <!-- 作者信息 -->
     <view class="user-box" @click="showOtherInfo(data.tripNew.userId)">
        <image class="user-avatar" :src="data.tripNew.authorAvatar"></image>
        <view class="user-info">
          <text class="user-name">{{data.tripNew.authorName}}</text>
        </view>
         <button class="s-button" v-if="data.curUser.id==data.tripNew.userId" @click="updateTripNew">编辑</button>
         <image class="remove-img" src="../../static/img/remove.png" v-if="data.curUser.id==data.tripNew.userId" @click="dialogToggle"></image>
         <button class="s-button" v-else-if="data.curUser.id != data.tripNew.userId && data.tripNew.att > 0" @click.stop="disAttUser(data.tripNew.userId)">已关注</button>
         <button class="s-button" v-else @click.stop="attUser(data.tripNew.userId)">关注</button>
      </view>
    </scroll-view>
    

    
    <!-- 点赞或收藏旅游资讯 -->
    <view class="act-trip-new">
      <view class="act-trip-new-box">
        <view class="act-trip-new-item" @click="likeTripNew">
          <image class="act-trip-new-img" v-if="data.tripNew.like>0" src="../../static/img/like-btn2.png"></image>
          <image class="act-trip-new-img" v-else src="../../static/img/like-btn1.png"></image>
          <text class="act-trip-new-text">{{data.tripNew.likeNum}}</text>
        </view>
        <view class="act-trip-new-item" @click="starTripNew">
          <image class="act-trip-new-img" v-if="data.tripNew.star>0" src="../../static/img/star-btn2.png"></image>
          <image class="act-trip-new-img" v-else src="../../static/img/star-btn1.png"></image>
          <text class="act-trip-new-text">{{data.tripNew.starNum}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { reactive, ref,toRefs,onMounted } from 'vue';
import {onLoad,onUnload,onShow} from '@dcloudio/uni-app'
import helper from '../../common/helper';
 
const data = reactive({
  curUser: uni.getStorageSync("curUser") || null,
  tripNewId: "",
  index:"",
  tripNew:{},
  indicatorDots: true,
  event:"",
  msgType:"",
  delete: 0,
  imgUrlList:[]
});

//警告窗口
const alertDialog = ref(null)

function dialogToggle(type) {
  data.msgType = type
  alertDialog.value.open()
}

onLoad((options)=>{
  console.log(options)
  data.tripNewId = options.tripNewId
  data.index = options.index
  data.event = options.event
})

onShow(()=>{
  if(data.tripNewId != null){
    getTripNewDetail()
    addBrowseLog()
  }
})

onUnload((options)=>{
  console.log("发起事件like")
  if(data.event != ""){
    uni.$emit('like', {
      like: data.tripNew.like,
      index: data.index,
      event: data.event
    });
  }
})

function imgPreview(index) {
  uni.previewImage({
      current:index,
      urls: data.imgUrlList
  })
}

function addBrowseLog(){
  if(helper.getToken() == null){
    return
  }
  uni.request({
    url: helper.webUrl + "/tripNew/addBrowseTipNewLog",
    method:'POST',
    header:{
      "token": helper.getToken(),
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    data: {
      tripNewId: data.tripNewId,
    },
    success: (res) => {
      console.log(res.data);
    },
    fail: (err) => {
      console.error('请求失败:', err);
    }
  })
}

async function getTripNewDetail(){
  let res = await helper.getTripNewDetailReq(data.tripNewId)
  if(res.data.code == 200){
    data.tripNew = res.data.data
    data.tripNew.startTime = helper.getDate(data.tripNew.startTime)
    if(data.tripNew.imgList.length <= 1){
      data.indicatorDots = false
    }
    for(let i = 0; i < data.tripNew.imgList.length; i++){
       data.imgUrlList.push(data.tripNew.imgList[i].url)
    }
  }
}

async function likeTripNew(){
  if(data.tripNew.like > 0){
    let res = await helper.dislikeTripNewReq(data.tripNewId)
    if(res.data.code == 200){
      data.tripNew.like = 0
      data.tripNew.likeNum--
    }
  }else{
    let res = await helper.likeTripNewReq(data.tripNewId)
    if(res.data.code == 200){
      data.tripNew.like = 1
      data.tripNew.likeNum++
    }
  }
}

async function starTripNew(){
  if(data.tripNew.star > 0){
    let res = await helper.disStarTripNewReq(data.tripNewId)
    if(res.data.code == 200){
      data.tripNew.star = 0
      data.tripNew.starNum--
    }
  }else{
    let res = await helper.starTripNewReq(data.tripNewId)
    if(res.data.code == 200){
      data.tripNew.star = 1
      data.tripNew.starNum++
    }
  }
}

function showOtherInfo(userId){
  console.log("查看用户")
  if(userId == data.curUser.id){
    return
  }
  uni.navigateTo({
    url:"/subpages/otherInfo/otherInfo?userId="+userId
  })
}

async function attUser(userId){
  console.log("关注用户")
  let res = await helper.attUserReq(userId)
  if(res.data.code == 200){
    data.tripNew.att = 1
  }
}

async function disAttUser(userId){
  let res = await helper.disAttUserReq(userId)
  if(res.data.code == 200){
    data.tripNew.att = 0
  }
}

function updateTripNew(){
  uni.navigateTo({
    url:"/subpages/publishTripNew/publishTripNew?tripNewId="+data.tripNewId
  })
}

function dialogConfirm() {
  console.log('点击确认')
  //跳转验证验证码
  deleteTripNew()
}

async function deleteTripNew(){
  let res = await helper.deleteTripNewReq(data.tripNewId)
   if(res.data.code == 200){
     data.delete = 1
     uni.navigateBack()
   }
}
</script>

<style>
.trip-new-view{
  width: 100vw;
  height: 100vh;
  background-color: #fff;
}
.trip-new-box{
  width: 100vw;
  height: 95vh;
}
.trip-img-list{
  width: 100vw;
  min-height: 55vh;
  max-height: 60vh;
}
.trip-new-img{
  width: 100vw;
  max-height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.trip-new-title{
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
}
.trip-new-road{
  padding: 10px;
  font-size: 18px;
}
.trip-new-journey,.trip-new-more{
  padding: 10px;
  font-size: 16px;
}
.trip-new-log{
  width: 100vw;
  height: 6vh;
  font-size: 20px;
  display: flex;
  align-items: center;
  padding-left: 10px;
  font-weight: bold;
}
.trip-index{
  width:5px;
  height: 20px;
  background-color: #89C0FF;
  margin-right: 10px;
}
.trip-info-box{
  display: flex;
  width: 100vw;
  align-items: center;
}
.trip-att-msg{
  display: flex;
  margin-left: auto;
  padding-right: 5px;
}
.trip-info{
  margin-top: auto;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  padding: 10px;
}
.trip-avatar{
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.trip-name{
  margin-left: 5px;
}
.m-button{
  height: 60%;
  margin-left: 5px;
  background-color: #89C0FF;
  font-size: 12px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
}
.act-trip-new{
  width: 100vw;
  height: 5vh;
  background-color: #fff;
  border-top: 1px solid #c5c5c5;
  display: flex;
  align-items: center;
}
.act-trip-new-box{
  display: flex;
  width: 150px;
  margin-left: auto;
  padding-right: 10px;
}
.act-trip-new-item{
  min-width: 60px;
  display: flex;
  align-items: center;
}
.act-trip-new-img{
  width: 30px;
  height: 30px;
}
.act-trip-new-text{
  color: #949494;
}
.user-box{
  width: 100vw;
  height: 7vh;
  background-color: #fff;
  padding: 5px;
  display: flex;
  align-items: center;
}
.user-avatar{
  width: 45px;
  height: 45px;
  border-radius: 50%;
}
.user-info{
  display: flex;
  flex-direction: column;
  margin-left: 10px;
  width: 60%;
}
.user-name{
  font-size: 16px;
  font-weight: bold;
}
.s-button{
  width: 22vw;
  height: 80%;
  background-color: #89C0FF;
  color: #fff;
  font-size: 18px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.remove-img{
  padding: 5px;
  width: 40px;
  height: 40px;
}
</style>
